<template>
	<view class="content">
		<image class="bg-image" mode="scaleToFill" src="/static/bg.jpg"></image>
		<view class="row animate__animated animate__bounceIn">
			<text class="text-tip">选择作业员</text>
			<view class="menu-btn">
				<view class="menu" @click="quit">
					<image class="img-icon" src="/static/logo/quit.png" mode="scaleToFill"></image>
					<text class="text-role">退出登录</text>
				</view>
				<view class="menu" @click="showBindUser">
					<image class="img-icon" src="/static/role/add.png" mode="scaleToFill"></image>
					<text class="text-role">绑定业务员</text>
				</view>
			</view>
			<view class="menu-user">
				<view class="menu" v-for="(item, index) in bindList" :key="index" @click="selectUser(item)">
					<image class="img-icon" src="/static/role/user.png" mode="scaleToFill"></image>
					<text class="text-role">{{ item.realName }}</text>
				</view>
			</view>
		</view>
		<u-popup :show="isBindUser" @close="isBindUser = false">
			<view class="popup-user">
				<view class="popup" v-for="(item, index) in noBindList" :key="index" @click="bindUser(item.id)">
					<image class="img-popup" src="/static/role/user.png" mode="scaleToFill"></image>
					<text class="text-popup">{{ item.realName }}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import common from '@/utils/common.js';
import operatorjs from '@/api/operator.js';
export default {
	data() {
		return {
			isBindUser: false,
			noBindList: [],
			bindList: []
		};
	},
	computed: {
		...mapGetters(['userInfo', 'operator', 'token'])
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		this.loadBindUser();
	},
	methods: {
		//退出登录
		quit() {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		},
		//选择登录身份
		selectUser(item) {
			//页面跳转
			this.operator.workUserId = item.id;
			this.operator.userId = item.userId;
			this.operator.userName = item.realName;
			this.$store.commit('SET_SWITCH_1', ['user']);
			this.$store.commit('SET_SWITCH_2', []);
			this.$store.commit('SET_OPERATOR', this.operator);
			let that = this;
			uni.showToast({
				icon: 'none',
				title: '登陆成功',
				success() {
					setTimeout(() => {
						that.$store.dispatch('roleToPage');
					}, 500);
				}
			});
		},
		//绑定业务员
		showBindUser() {
			this.isBindUser = true;
			this.loadNoBindUser();
		},
		//加载未绑定业务员
		async loadNoBindUser() {
			let res = await operatorjs.getBindUser(this.userInfo.stationId, 1, this.token);
			if (common.httpIsWrong(res)) return;
			this.noBindList = res.json.data.data;
		},
		//加载绑定业务员
		async loadBindUser() {
			let res = await operatorjs.getBindUser(this.userInfo.stationId, 0, this.token);
			if (common.httpIsWrong(res)) return;
			this.bindList = res.json.data.data;
		},
		//绑定业务员
		async bindUser(id) {
			let res = await operatorjs.bindUser(id, this.userInfo.stationId, this.token);
			if (common.httpIsWrong(res)) return;
			this.isBindUser = false;
			this.loadBindUser();
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.popup-user {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		flex-flow: row wrap;
		background-color: #fdddc4;
		.popup {
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 33.33%;
			.img-popup {
				margin-top: 30rpx;
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
			}
			.text-popup {
				color: #01af56;
				font-weight: bold;
			}
		}
	}
	.bg-image {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 0;
	}

	.row {
		z-index: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		align-items: center;
		.menu-btn {
			width: 100%;
			display: flex;
			justify-content: space-around;
			.menu {
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.33%;
				.img-icon {
					margin-top: 30rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.text-role {
					color: white;
					font-weight: bold;
				}
			}
		}
		.text-tip {
			color: white;
			font-size: 36rpx;
			font-weight: bold;
			margin: 120rpx 0 20rpx 0;
		}
		.menu-user {
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-flow: row wrap;
			overflow: scroll;
			.menu {
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.33%;
				.img-icon {
					margin-top: 30rpx;
					width: 240rpx;
					height: 240rpx;
					border-radius: 50%;
				}
				.text-role {
					color: white;
					font-weight: bold;
				}
			}
		}
	}
}
::v-deep .u-slide-up-enter-active {
	height: 60%;
	overflow: scroll;
}
</style>
